<template>
  <view>
    <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view" v-if="result.length > 0">
      <picker-view-column>
        <view class="item" v-for="(item,index) in result" :key="index"><text>{{item.name}}</text></view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item,index) in result[value[0]].childlist" :key="index"><text>{{item.name}}</text></view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item,index) in result[value[0]].childlist[value[1]].childlist" :key="index"><text>{{item.name}}</text></view>
      </picker-view-column>
    </picker-view>
    <view class="btn-box">
      <view class="btn" @click="onClick(false)"><text>取消</text></view>
      <view class="btn active" @click="onClick(true)"><text>确认</text></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      indicatorStyle: `height: 80rpx;`,
      value: [0, 0, 0],
      result: [],
      current: null
    }
  },
  props: {
    areaId: {
      type: [String, Number],
      default: ''
    }
  },
  created() {
    let city = this.$store.state.city || '成都'
    let regiona = uni.getStorageSync('regiona') || null
    try{
      if(!regiona) {
        this.$api.jsonData.regionalAll().then(data => {
          uni.setStorageSync('regiona', data.data.Item.childlist)
          this.cityAddAll(data.data.Item.childlist, (res) => {
            this.result = res
            res.childlist.map((item, index) => {
              item.childlist.map((i,k) => {
                if(i.name.indexOf(city) > -1) {
                  this.value = [index, k, 0]
                  // this.result = item.childlist
                  throw new Error()
                }
              })
            })
          })
        })
      } else {
        this.cityAddAll(regiona, (res) => {
          this.result = res
          res.map((item, index) => {
            item.childlist.map((i,k) => {
              if(i.name.indexOf(city) > -1) {
                this.value = [index, k, 0]
                // this.result = item.childlist
                throw new Error()
              }
            })
          })
        })
      }
    }catch(e){
      //TODO handle the exception
    }
    
  },
  methods: {
    cityAddAll(regiona, callback) {
      this.$commen.getLocation(data => {
        regiona.unshift({
          Lat: data.lat,
          Lng: data.lon,
          childlist: [],
          id: 0,
          level: 0,
          mername: "",
          name: "全部",
          pid: 0,
          pinyin: "quanbu",
          sname: '全部'
        })
        regiona.map((item, index) => {
          item.childlist.unshift({
            Lat: item.Lat,
            Lng: item.Lng,
            childlist: [],
            id: item.id,
            level: item.level,
            mername: "",
            name: "全部",
            pid: item.pid,
            pinyin: "quanbu",
            sname: '全部'
          })
          item.childlist.map((i,k) => {
            i.childlist.unshift({
              Lat: i.Lat,
              Lng: i.Lng,
              childlist: [],
              id: i.id,
              level: i.level,
              mername: "",
              name: "全部",
              pid: i.pid,
              pinyin: "quanbu",
              sname: '全部'
            })
          })
        })
        callback && callback(regiona)
      })
    },
    bindChange(data) {
      let current = data.detail.value
      let old = this.value
      if(current[0] !== old[0]) {
        current[1] = 0
      }
      if(current[1] !== old[1]) {
        current[2] = 0
      }
      this.value = current
      let province = this.result[this.value[0]]
      let city = this.result[this.value[0]].childlist[this.value[1]]
      let area = this.result[this.value[0]].childlist[this.value[1]].childlist[this.value[2]]
      let name = '全部'
      if(area.name != '全部') {
        name = area.name
      } else if(city.name != '全部') {
        name = city.name
      }else if(province.name != '全部') {
        name = province.name
      }
      this.current = {
        item: area,
        name: name
      }
      
    },
    onClick(data) {
      if(data) {
        this.$emit('change', this.current)
      } else {
        this.$emit('change', null)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.picker-view {
  width: 750rpx;
  height: 400rpx;
  background-color: #fff;
}
.item {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.btn-box{
  height: 88rpx;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-top: 2rpx solid #eee;
  .btn{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #333;
  }
  .active{
    background-color: #FBD321;
  }
}
</style>
